<template>
    <van-cell-group inset class="item">
        <div class="header-date">
            <div>{{bill.date}}</div>
            <div class="money">
                <span><b>支</b>{{expense.toFixed(2)}}</span>
                <span><b>收</b>{{income.toFixed(2)}}</span>
            </div>
        </div>
        <van-cell 
            :class="{expense:item.pay_type ==1,income:item.pay_type == 2}" 
            v-for="item in bill.bills"
            @click="goToDetail(item)"
            :key="item.id"
            :title="item.type_name" 
            :value="`${item.pay_type == 1 ? '-' : '+'}${item.amount}`"
            :label="`${$filters.transTime(item.date)} | ${item.remark}`"
        />
        <!-- <van-cell class="expense" title="餐饮" value="-23.00" label="10:00 | 描述信息"/>
        <van-cell class="income" title="餐饮" value="+12.00" label="12:00 | 描述信息" /> -->
    </van-cell-group>
</template>

<script >
import { computed, reactive, toRefs } from 'vue';
import { useRouter } from 'vue-router';

export default {
    props:{
        bill:{
            type:Object,
            default:{}
        }
    },
    setup(props){
        const router = useRouter();
        const state = reactive({
            income:0,
            expense:0
        })
        state.income = props.bill.bills.filter(i => i.pay_type == 2).reduce((curr,item) => {
            curr += Number(item.amount)
            return curr
        },0)
        state.expense = props.bill.bills.filter(i => i.pay_type == 1).reduce((curr,item) => {
            curr += Number(item.amount)
            return curr
        },0)
        const goToDetail = (item) => {
            console.log(item.id);
            router.push({
                path:'/detail',
                query:{
                    id:item.id
                }
            })
        }
        return {
            ...toRefs(state),
            goToDetail
        }
    }
}
</script>

<style lang="scss" scoped>
.item{
    border-radius: 10px;
    // overflow: hidden;
    box-shadow: 0 0 4px 0 rgba(0,0,0,0.1);
    margin-bottom: 10px;
    .header-date{
        height: 60px;
        display: flex;
        background-color: #f9f9f9;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
        font-size: 13px;
        div{
            color:$color-text-base;
        }
        .money{
            span{
                margin-left: 20px;
                b{
                    color: $color-text-caption;
                    font-weight: normal;
                    background-color: #f5f5f5;
                    padding: 3px;
                    margin-right: 2px;
                }
            }
            
        }
    }
}

</style>
<style lang="scss">
.expense{
    .van-cell_title{
        text-align: left;
    }
    .van-cell_value{
        color: $color-text-base !important;
    }
    .income{
        color: $text-warning !important;
    }
}
</style>